<!-- d:/QuicMarket/GoP/HTML/tpl/content/users/orders.html -->
{{define "заказы"}}
<div id="dashboard-content" data-updateMethod="replaceWith">
<div class="container">
    <h1>User Orders</h1>
    <table class="table is-hoverable">
        <thead>
            <tr>
                <th>Order ID</th>
                <th>Date</th>
                <th>Status</th>
                <th>Total</th>
            </tr>
        </thead>
        <tbody>
            <!-- Example row, repeat this block for each order, with actual data -->
            <tr onclick="openOrderModal(orderId)">
                <td>#12345</td>
                <td>2023-04-01</td>
                <td>Shipped</td>
                <td>$150.00</td>
            </tr>
            <!-- Add more rows here -->
        </tbody>
    </table>
</div>

<!-- The Modal -->
<div id="orderModal" class="modal">
    <div class="modal-background"></div>
    <div class="modal-card">
        <header class="modal-card-head">
            <p class="modal-card-title">Order Details</p>
            <button class="delete" aria-label="close" onclick="closeOrderModal()"></button>
        </header>
        <section class="modal-card-body">
            <!-- Content: Order details go here -->
        </section>
        <footer class="modal-card-foot">
            <button class="button is-success" onclick="closeOrderModal()">Close</button>
        </footer>
    </div>
</div>
<script>
    function openOrderModal(orderId) {
        // Fetch order details using orderId and update modal content
        // Then show the modal
        document.getElementById('orderModal').classList.add('is-active');
    }

    function closeOrderModal() {
        document.getElementById('orderModal').classList.remove('is-active');
    }
</script>
</div>

{{end}}
